<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>HTML5 + CSS3 动效演示</title>
		<link rel="stylesheet" type="text/css" href="../build/css/amazeui.min.css" />
		<link rel="stylesheet" type="text/css" href="../build/css/animate.min.css" />
		<style type="text/css">
			p{font-size: 2.2rem;}
			html,
			body{width: 100%;height: 100%;padding: 0;margin: 0;overflow: hidden;background-color: #222;background-image: url();background-repeat: repeat;font-family: Helvetica, sans-serif;color: #fff;}
			#warp{height: 100%;}
			#warp .am-g{position: absolute;width: 100%;height: 100%;text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.1);}
			.home{background: #dc6c5f;}
			.info{background: #40523C;text-align: center;}
			.resume{background: #64b9d2;}
			.project{background: #CC9999;}
			.five{background: #CCCCFF;}
			/*屏幕子弹栏*/
			.bullets{position: fixed;width: 100%;bottom: 20px;padding: 0;margin: 0;text-align: center;z-index: 20;line-height: 14px;background-color: #000000;opacity: 0.3;}
			.bullets li{display: inline-block;width: 20px;height: 20px;border-radius: 50%;margin: 0 3px;background: rgba( 255, 255, 255, 0.5);box-shadow: 0px 0px 4px rgba( 0, 0, 0, 0.2);cursor: pointer;-webkit-tap-highlight-color: rgba( 0, 0, 0, 0);}
			.bullets li:hover{background: rgba( 255, 255, 255, 0.8);}
			.bullets li.active{cursor: default;background: #fff;}
			@media screen and (max-width: 400px){
				.bullets li{margin: 0 6px;}
			}
			.backMask{position: fixed;top: 0%;left: 0%;width: 100%;height: 100%;z-index: 1001;-moz-opacity: 0.7;opacity: .70;filter: alpha(opacity=70);}
			.hide{display: none;}
			.show{display: block;}
		</style>
	</head>

	<body>
		<!--宽窄屏-->
		<article id="warp">
			<div class="am-g home show am-padding-xl">
				<div>
					<h1>API</h1>
					<p>初始化 : $("#warp").gsPage();</p>
					<p>上一页 : $.fn.gsPage.prev();</p>
					<p>下一页 : $.fn.gsPage.next();</p>
					<p>绑定方向键 : $.fn.gsPage.keyDownFn(); 也可以初始化时设置$("#warp").gsPage({"keydown":true});</p>
					<p>绑定滑动事件 : $.fn.gsPage.swipeFn(); 也可以初始化时设置$("#warp").gsPage({"swipe":true}); ---依赖组件jquery.touchSwipe</p>
				</div>
				<div>
					<button type="button" class="am-btn am-btn-primary am-round" id="prev">上一页</button>
					<button type="button" class="am-btn am-btn-primary am-round" id="next">下一页</button>
					<button type="button" class="am-btn am-btn-primary am-round" id="keydown">绑定方向键</button>
					<button type="button" class="am-btn am-btn-primary am-round" id="touch">绑定滑动事件</button>
				</div>	
				<div>
					<p>传入自定义隐藏动画 : $.fn.gsPage.defaults.outAnimate = "xxx";</p>
					<p>传入自定义隐藏动画 : $.fn.gsPage.defaults.comeAnimate = "xxx";</p>
					<p>传入动画速度 : $.fn.gsPage.defaults.animateSpeed = 555;</p>
					<p>动画效果参数参考 Animate.css,取消自定义设置为false即可</p>
				</div>	
			</div>
			<div class="am-g info hide">
				<div class="am-u-sm-12 height-100 no-padding one">
					<!--<h2>第一页</h2>-->
					<h2 id="wenti" style="top: 20px; font-size: 22px;height: 200px;">
						王小姐是卖鞋的，一双鞋进货价45元,
						<br> 甩卖30元，顾客来买双鞋给了张100元，
						<br> 王小姐没零钱，于是找邻铺换了100元。
						<br> 事后邻铺发现钱是假的，王小姐又赔了邻铺100元。
						<br> 请问王小姐一共亏了多少元?
						<br>
					</h2>

					<div id="info" style="font-size: 26px;">
						设 王小姐 身上为&emsp;<span> 45 </span>&emsp;元</br>
						进鞋45元, 余额&emsp;<span> 0 </span>&emsp;元</br>
						卖鞋收到假钱100(暂未发现),余额&emsp;<span> 100 </span>&emsp;元</br>
						跟邻居换100,余额 &emsp;<span> 100 </span>&emsp;元</br>
						找顾客70元,剩余30元,余额&emsp;<span> 30 </span>&emsp;元</br>
						又赔了邻铺100元,余额&emsp;<span> -70 </span>&emsp;元</br>
						</br>
						自己成本为45元，所以最后亏损&emsp;<span> 115 </span>&emsp;元</br>
					</div>
				</div>
			</div>
			<div class="am-g resume hide">
				<div class="am-u-sm-12 height-100">
					<h2>正在加速创造中.....</h2>
				</div>
			</div>
			<div class="am-g project hide">
				<div class="am-u-sm-12 height-100">
					<h2>正在加速创造中.....</h2>
				</div>
			</div>
		</article>

		<script src="//cdn.bootcss.com/require.js/2.3.1/require.min.js" data-main="js/main"></script>
	</body>

</html>